<!--
 * @Author: 晓杭 xiaohang070809@163.com
 * @Date: 2022-06-16 15:17:38
 * @LastEditors: 晓杭 xiaohang070809@163.com
 * @LastEditTime: 2022-06-23 15:49:00
 * @FilePath: \hr-cms\src\views\employees\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{padding:'20px'}">
      <div slot="header">

        <!-- 自己封装的工具栏组件 -->
        <PageTools>
          <template #left>
            <span>总记录数:100条</span>
          </template>
          <template #right>
            <el-button type="warning">导入Excle</el-button>
            <el-button type="danger">导出Excle</el-button>
            <el-button type="primary">新增员工</el-button>

          </template>
        </PageTools>
        <!-- table列表 -->
        <el-table border :data="list">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column prop="formOfEmployment" label="聘用形式" />
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column prop="timeOfEntry" label="入职时间" />
          <el-table-column prop="" label="账户状态">
            <el-switch v-model="qy" />
          </el-table-column>
          <el-table-column prop="" label="操作" fixed="right" width="280">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <!-- <el-pagination
            :total="total"
            :current-page="params.page"
            :page-size="params.size"
            :page-sizes="[10, 2]"
            layout="prev, pager, next, sizes"
            @current-change="changePage"
            @size-change="sizeChange"
          /> -->
          <el-pagination
            layout="prev, pager, next, sizes"
          />
        </el-row>
      </div>
      <!-- card body -->
    </el-card>
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools'
import { getEmployeeListApi } from '@/api/employees'
export default {
  name: 'Employees',
  data() {
    //  * @param {*} params {page:当前页,size：每页条数}
    return {
      list: [],
      params: {
        page: 1,
        size: 2
      },
      total: 0
    }
  },
  mounted() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      const { rows, total } = await getEmployeeListApi(this.params)
      // console.table(rows)
      this.list = rows
      this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
